<template>
  <a-upload-dragger
    name="file"
    action=""
    accept=".mp4,.avi,.rm,.wmv,.flv,.mkv"
    :default-file-list="defaultFileList"
    :custom-request="httpRequest"
    @change="handleChange"
    @preview="handlePreview"
  >
    <p class="ant-upload-drag-icon">
      <a-icon type="inbox" />
    </p>
    <p class="ant-upload-text">
      点击或将文件拖拽到这里上传
    </p>
    <p class="ant-upload-hint" style="padding: 0 30px">
      支持扩展名：.mp4 .avi .rm .wmv .flv .mkv等视频格式文件
      文件大小请控制在300M以内
    </p>

    <a-modal
      title="视频预览"
      :width="800"
      :visible="visible"
      footer=""
      @cancel="visible = false"
    >
      <video
        v-if="visible"
        :src="videoUrl"
        controls
        autoplay
        class="video"
        width="100%"></video>
        <!-- <video-player v-if="visible"  class="video-player vjs-custom-skin" 
            ref="videoPlayer" 
            :playsinline="true" 
            :options="playerOptions">
      </video-player> -->
    </a-modal>
  </a-upload-dragger>
</template>

<script>
import { uploadVideo } from '@/api'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
// import 'videojs-flash'

export default {
  name: 'Index',
  components: {
    videoPlayer
  },
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      defaultFileList: [],
      loading: false,
      visible: false,
      videoUrl: '',
      playerOptions: {
            playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
            autoplay: false, // 如果为true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 是否视频一结束就重新开始。
            preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: 'zh-CN',
            aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            sources: [{
              type: 'video/mp4',
              src: '' // url地址
            }],
            // techOrder: ['flash'],
            poster: '', // 封面地址
            notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true, // 当前时间和持续时间的分隔符
              durationDisplay: true, // 显示持续时间
              remainingTimeDisplay: false, // 是否显示剩余时间功能
              fullscreenToggle: true // 是否显示全屏按钮
            }
          }
    }
  },
  created() {
   if (this.url) {
      this.defaultFileList = [{
        uid: '-1',
        name: this.url,
        status: 'done',
        response: {
          videoUrl: this.url
        }
      }]
   } else {
     this.defaultFileList = []
   }
      
  },
  methods: {
    /**
     *  上传图片
     */
    // 新增上传图片
    async httpRequest (file) {
      console.log(file.file.type.toLowerCase())
      const list = ['video/mp4']
      if (list.indexOf(file.file.type.toLowerCase()) === -1 ) return this.$message.error('上传格式不正确');
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await uploadVideo(formData)
      console.log(res)
      this.$emit('change-url', res.videoUrl)
      file.onSuccess(res, file.file)
      return false
    },
    async handleChange (e) {
      console.log(e)
      if (e.fileList.length > 1) {
        e.fileList.splice(0, 1)
      }
    },
    handlePreview (e) {
      if (!e.response) return
      console.log(e)
      this.playerOptions.sources = [{ type: 'video/mp4', src: e.response.videoUrl }]
      this.videoUrl = e.response.videoUrl
      this.visible = true
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
